<script setup>
import CartItem from "@/components/CartItem.vue";
import Layout from "@/components/Layout.vue";
import {  ref } from "vue";
import { useCartStore, useShopStore } from "@/stores";
const cartStore = useCartStore();
const shopStore = useShopStore();
const { shops } = shopStore;
const { cartList } = cartStore;
const cartOrder = ref([])
const productsData = cartList;
// 遍历productsData，把每一项转成一个对象放到cartOrder数组中
for (const key in productsData) {
  if (Object.prototype.hasOwnProperty.call(productsData, key)) {
    const element = productsData[key];
    cartOrder.value.push({
      shopId:key,
      shopName:shops[key],
      orderList:element//商品列表，传给CartItem
    })
    
  }
}

</script>

<template>
  <layout>
    <div class="main">
      <van-nav-bar title="购物车" />
      <CartItem v-for="cartItem in cartOrder" :cartItem="cartItem" :key="cartItem.shopId"></CartItem>
    </div>
  </layout>
</template>
<style scoped lang="scss">
.main {
  height: 100%;
  background-color: #f8f8f8;
}


</style>
